<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body{
            background-image: url("../../images/img/back.jpg");
           background-repeat: no-repeat;
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            position: absolute;
        }
        .login-wrap {
            box-sizing: border-box;
            padding-top: 10%;
            padding-bottom: 10%;
            /*background-repeat: repeat-y;*/
            background-position: center right;
        }

        .login-container {
         border-radius: 10px;
            margin: 0px auto;
            width: 350px;
            padding: 30px 35px 15px 35px;
            margin-top:100px;
            background-color: rgb(255, 255, 255);
            text-align: left;
        }
        .title{
             text-align:center;
             text-color:rgb(40, 40, 40);
        }

    </style>
</head>
<body>
<div id="app">
    <template>
        <div class="login-wrap">
            <el-form class="login-container">
                <h1 class="title">注册账号</h1>
                <el-form-item label="账号">
                    <el-input type="username" v-model="form.username" placeholder="注册账号" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="登录密码">
                    <el-input type="password" v-model="form.password" placeholder="输入密码" show-password
                              autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" style="width: 100%;" @click="register()">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </template>
</div>
<script src="../../js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../../js/jquery.min.js"></script>

<script type="text/javascript" src="../../js/axios-0.18.0.js"></script>
<script>
    var Vue = new Vue({
        el: "#app",
        data: {

            form: {},//登录数据
        },
        /*data() {
            return {
                    uname: "admin",
                    password: "123",
            };
        },*/

        methods: {
            register() {
                axios.post("/users/register", this.form).then((res) => {
                    /*console.log(this.form.username);
                    console.log(res.data);*/
                    //console.log(res.data.code);
                    if (res.data.code == 20011) {
                        alert("注册成功，请重新登录！");
                        window.location.href = '../login/login.html';
                    }else{
                        this.$message.error(res.data.msg);
                    }
                });
            }
        },

    });

</script>
</body>
</html>